<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>算数大王</title>
    <link rel="stylesheet" href="css.css">
</head>
<body>
    <div class="container">
        <a href="wuxian.html" class="fanhui">返回</a>
        <div class="score">第 <span id="score">1</span> 题</div>
        
        <div class="question" id="question-container">
            <!-- 问题将在这里动态生成 -->
        </div>
        <div class="sub">
            <input type="text"  id="answer-input" style="height: 20px; width: 200px" placeholder="输入答案（除法保留两位小数）">

            <div class="answer-section" id="result"></div>
   
            <button class="btn" onclick="checkAnswer()">提交答案</button>
        </div>
    </div>

    <script>
        let score = 1;
        let currentQuestion = null;
     
        function updateScoreDisplay() {
            document.getElementById('score').textContent = score;
        }
     
        function generateRandomQuestion() {
            const num1 = Math.floor(Math.random() * 100) + 1;
            const num2 = Math.floor(Math.random() * 100) + 1;
            answer=num1-num2;
            return { question: `${num1} - ${num2} =`, answer: parseFloat(answer) };
        }
     
        function generateNewQuestion() {
            const questionContainer = document.getElementById('question-container');
            const resultSection = document.getElementById('result');
     
            questionContainer.innerHTML = '';
            resultSection.textContent = '';
     
            currentQuestion = generateRandomQuestion();
            questionContainer.innerHTML = `<p>${currentQuestion.question}</p>`;
     
            document.getElementById('answer-input').value = '';
        }
     
        function checkAnswer() {
            const userAnswer = document.getElementById('answer-input').value;
            const resultSection = document.getElementById('result');
     
            const userAnswerNum = parseFloat(userAnswer);
            const tolerance = 0.01; // 允许的小数误差范围
     
            if (!isNaN(userAnswerNum) && Math.abs(userAnswerNum - currentQuestion.answer) < tolerance) {
                score += 1;
                generateNewQuestion();
            } else {
                resultSection.textContent = '回答错误';
                resultSection.style.color = 'red';
            }
     
            updateScoreDisplay();
            document.getElementById('answer-input').value = '';
        }
     
        window.onload = function() {
            generateNewQuestion();
            updateScoreDisplay();
        };
    </script>
</body>
</html>